<template>
  <div class="locationView">
    <div class="locationViewCondition">
      <div class="areaTop">
        <div class="title">库区选择</div>
        <div class="warehouseSelect">
          <el-select v-model="form.warehouseId" placeholder="请选择" @change="selectFn">
            <el-option v-for="(item,index) in list"
            :key="index"
            :label="item.name"
            :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="areaContent">
        <div class="areaCondition">
          <el-input
            size="medium"
            placeholder="请输入库区名称"
            suffix-icon="el-icon-search"
            @input="searchFn"
            v-model="ipt"
           >
          </el-input>
        </div>
        <div class="areaDetails">
          <div class="areaList" v-if="this.childrenList.length !==0">
            <el-scrollbar>
              <div class="divAreaItem"
              v-for="(item,index) in childrenList"
              :key="index"
              ref="xiaomi"
              @click="getView(item.id,index)"
              ><div :class="{active:index === num}">{{item.name}}</div></div>
            </el-scrollbar>
          </div>
          <div class="noArea" v-else>
            <div class="fontDisplay">暂无库区</div>
            <button class="addBtn" @click="$router.push('/detail1')">新增库区</button>
          </div>
        </div>
      </div>
    </div>
    <div class="Division"></div>
    <div class="locationViewDisplay">
      <div class="top">
        <div class="title">库区总览</div>
        <div class="overView">
          <div class="item">
            <span class="spanLabel">库存总计:</span>
            <span>{{views.total}}</span>
          </div>

           <div class="item">
            <div class="square" style="background-color: rgb(195, 195, 195); width: 12px; height: 12px; border-radius: 3px;"></div>
            <span class="spanLabel">停用库位：</span>
            <span>{{views.stop}}</span>
          </div>

           <div class="item">
            <div class="square" style="background-color: rgb(0, 190, 118); width: 12px; height: 12px; border-radius: 3px;"></div>
            <span class="spanLabel">占用库位：</span>
            <span>{{views.use}}</span>
          </div>

           <div class="item">
            <div class="square" style="background-color: rgb(178, 220, 204); width: 12px; height: 12px; border-radius: 3px;"></div>
            <span class="spanLabel">空闲库位：</span>
            <span>{{views.free}}</span>
          </div>
        </div>
      </div>
      <div class="content" v-if="this.div.length !== 0">
        <el-tooltip placement="bottom" effect="light" v-for="(item,index) in div" :key="index">
          <div :class="item.active">
          </div>
          <div slot='content' class="tips">
            <p>库位编号：<span>{{item.areaCode}}</span></p>
            <p>库位名称：<span>{{item.name}}</span></p>
            <p>库位位置：<span>{{item.locationRow}}排{{item.locationColumn}}列{{item.locationLayer}}层</span></p>
            <p>库位状态：<span>{{item.useStatus === 0 ? '空闲' : '占用'}}</span></p>
            <p>货品名称：<span></span></p>
            <p>货品数量：<span></span></p>
            </div>
        </el-tooltip>
      </div>
      <div class="emptyTip" v-else>
        <span class="img"></span>
        <p>暂无库位</p>
        <button class="btn" @click="$router.push('/detail2')">新增库位</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getSelectList, getList, getView, getDiv, search } from '@/api/baseInfo/storageView'
export default {
  name: 'storageView-page',
  data () {
    return {
      list: [],
      childrenList: [],
      form: {
        warehouseId: '',
        status: '1'
      },
      views: {},
      div: [],
      ipt: '',
      num: 0
    }
  },
  methods: {
    async selectFn () {
      const { data } = await getList(this.form)
      console.log(data)
      this.childrenList = data
    },
    async getView (id, index) {
      const { data } = await getView(id)
      const { data: data1 } = await getDiv(id)
      data1.forEach(item => {
        if (item.useStatus === 0 && item.status === 1) {
          item.active = 'bgc'
        } else if (item.status === 1 && item.useStatus === 1) {
          item.active = 'active1'
        } else if (item.useStatus === 0 && item.status === 0) {
          item.active = 'active2'
        }
      })
      this.views = data
      this.div = data1
      if (index !== undefined) {
        this.num = index
      }
    },
    async searchFn () {
      const { data } = await search(this.ipt)
      this.childrenList = data
    }
  },
  async created () {
    const { data } = await getSelectList()
    this.form.warehouseId = data[0].id
    this.list = data
  },
  watch: {
    form: {
      deep: true,
      async handler () {
        const { data } = await getList(this.form)
        this.childrenList = data
      }
    },

    childrenList: {
      deep: true,
      handler () {
        this.getView(this.childrenList[0].id)
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.locationView {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  height: calc(100vh - 114px);
  .locationViewCondition {
    width: 263px;
    padding: 27px 19px 27px 20px;
    float: left;
    .areaTop {
      margin-bottom: 21px;
      .title {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC,PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #332929;
          line-height: 22px;
          margin-bottom: 22px;
          margin-left: 10px;
      }
      .warehouseSelect {
          width: 224px;
          ::v-deep .el-input__inner{
            height: 40px;
            line-height: 40px;
            border: 1px solid #f8f5f5;
            background: #f8f5f5;
            border-radius: 6px;
          }
      }
    }
    .areaContent {
      width: 224px;
      background: #fdfcf9;
      border: 1px solid #f7f2f1;
      border-radius: 6px;
      padding: 30px 20px 0 20px;
      .areaCondition {
        margin-bottom: 10px;
        ::v-deep .el-input__inner {
            height: 40px;
            line-height: 40px;
            border: 1px solid #f8f5f5;
            background: #f8f5f5;
            border-radius: 6px;
        }
      }
      .areaDetails {
        height: calc(100vh - 360px);
        position: relative;
        .areaList {
          height: 100%;
          .el-scrollbar {
            height: 100%;
            .divAreaItem {
            width: 140px;
            height: 40px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
            margin-left:17px;
            margin-top: 20px;
            margin-bottom: 20px;
            font-size: 13px;
            font-family: PingFangSC,PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            color: #ffb200;
            line-height: 40px;
            cursor: pointer;
          }
          .active {
            background: #ffb200;
            color: #332929;
          }

          }

        }
        .noArea {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          .fontDisplay {
            width: 56px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC,PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #b5abab;
            line-height: 20px;
            margin: 0 auto;
            margin-bottom: 19px;
          }
          .addBtn {
            width: 126px;
            background: #00be76;
            color: #fff;
            height: 40px;
            border-radius: 20px;
            border: 0;
            font-size: 14px;
            font-family: PingFangSC,PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            line-height: 40px;
            padding-left: 26px;
            padding-right: 26px;
            cursor: pointer;
            outline: 0;
          }
        }
      }
    }
  }
   .Division {
      float: left;
      width: 10px;
      height: 100%;
      background: linear-gradient(270deg,hsla(0,0%,100%,0),rgba(99,97,96,.1));
    }
    .locationViewDisplay {
      padding: 27px 19px 27px 20px;
      float: left;
      height: 100%;
      width: calc(100% - 273px);
      .top {
        margin-bottom: 21px;
        height: 22px;
        .title {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC,PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #332929;
          line-height: 22px;
          float: left;
          margin-right: 103px;
        }
        .overView {
          display: flex;
          .item {
           display: flex;
           align-items: center;
            margin-right: 43px;
            .spanLabel {
              float: left;
              margin-right: 4px;
              width: 70px;
              font-size: 14px;
              font-family: PingFangSC,PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #424250;
            }
            span {
              height: 22px;
              line-height: 22px;
            }
            .square {
              margin-right: 5px;
            }
          }
        }
      }
      .content {
        display: flex;
        width: 100%;
        height: calc(100% - 43px);
        overflow-y: auto;
        .bgc {
          margin-right: 20px;
          width: 36px;
          height: 36px;
          border-radius: 7px;
          background-color: #b2dccc;
        }
        .active1 {
          margin-right: 20px;
          width: 36px;
          height: 36px;
          border-radius: 7px;
          background-color: #00be76;
        }
        .active2 {
          margin-right: 20px;
          width: 36px;
          height: 36px;
          border-radius: 7px;
          background-color: #c3c3c3;
        }
      }
      .emptyTip {
        border-top: 1px solid #f5efee;
        padding: 100px 0;
        margin: 0 auto;
        color: #b5abab;
        font-size: 14px;
        text-align: center;
        .img {
          width: 160px;
          height: 160px;
          display: inline-block;
          background: url(http://www-wms-java.itheima.net/img/empty.4300e933.png) no-repeat;
          background-size: contain;
        }
        p {
          padding: 5px 0 0;
        }
        .btn {
          margin-top: 20px;
          background: #00be76;
          color: #fff;
          height: 40px;
          border-radius: 20px;
          border: 0;
          font-size: 14px;
          font-family: PingFangSC,PingFangSC-Medium;
          font-weight: 500;
          text-align: center;
          line-height: 40px;
          padding-left: 26px;
          padding-right: 26px;
          cursor: pointer;
          outline: 0;
        }
      }
    }
  ::-webkit-scrollbar {
 width: 0 !important;
 /*滚动条宽度*/
 height: 0px;
 /*滚动条高度*/
 background-color: rgb(0, 12, 46);
}
}
 .tips {
  padding: 10px;
  p{
    margin-top: 10px;
    margin-right: 15px;
    color: #b5abab;
    span {
      color: #332929;
    }
  }
 }

</style>
